<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>动能守恒</title>
</head>
<body>
    <canvas id="myCanvas" width="600" height="500" style="border: 1px solid #ccc">
        糟糕 你的浏览器 我还搞不懂也？
    </canvas>
    <script src="../script/wind/wind-all-0.7.3.js"></script>
    <script>
        const myCanvas = document.getElementById("myCanvas");
        const myCanvasCtx = myCanvas.getContext("2d");
        const r = 15;
        const cyc = 20;
        const ball = {
            x: 20,
            y: 285,
            r: r,
            vx: 120,
            vy: 0,
        }
        const ball2 = {
            x: 400,
            y: 285,
            r: r,
            vx: -30,
            vy: 0,
        }
        const balls = [];
        balls.push(ball);
        balls.push(ball2);
        myCanvasCtx.fillStyle = "#030303";
        myCanvasCtx.fillRect(0, 0, myCanvas.width, myCanvas.height);
        const init = function () {
            myCanvasCtx.fillStyle = "#fff";
            for (let i in balls) {
                myCanvasCtx.beginPath();
                myCanvasCtx.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2, true);
                myCanvasCtx.closePath();
                myCanvasCtx.fill();
            }
        }

        // 弹性碰撞
        const collide = function () {
            myCanvasCtx.fillStyle = "rgba(0, 0, 0, .3)";
            myCanvasCtx.fillRect(0, 0, myCanvas.width, myCanvas.height);
            myCanvasCtx.fillStyle = "#fff";
            if (Math.abs(ball.x - ball2.x) <= 2 * r) {
                const temp = ball.vx;
                ball.vx = ball2.vx;
                ball2.vx = temp;
            }
            for (let i in balls) {
                balls[i].x += balls[i].vx * cyc / 1000;
                myCanvasCtx.beginPath();
                myCanvasCtx.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2, true);
                myCanvasCtx.closePath();
                myCanvasCtx.fill();
            }
        }

        // 非弹性碰撞
        const collide1 = function () {
            myCanvasCtx.fillStyle = "rgba(0, 0, 0, .3)";
            myCanvasCtx.fillRect(0, 0, myCanvas.width, myCanvas.height);
            myCanvasCtx.fillStyle = "#fff";
            if (Math.abs(ball.x - ball2.x) <= 2 * r) {
                let sum = ball.vx + ball2.vx;
                ball2.vx = ball.vx * 0.65;
                ball.vx = sum - ball2.vx;
            }
            for (let i in balls) {
                balls[i].x += balls[i].vx * cyc / 1000;
                myCanvasCtx.beginPath();
                myCanvasCtx.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2, true);
                myCanvasCtx.closePath();
                myCanvasCtx.fill();
            }
        }
        // 完全非弹性碰撞
        const collide2 = function () {
            myCanvasCtx.fillStyle = "rgba(0, 0, 0, .3)";
            myCanvasCtx.fillRect(0, 0, myCanvas.width, myCanvas.height);
            myCanvasCtx.fillStyle = "#fff";
            if (Math.abs(ball.x - ball2.x) <= 2 * r) {
                let v = (ball.vx + ball2.vx) / 2;
                ball2.vx = v;
                ball.vx = v;
            }
            for (let i in balls) {
                balls[i].x += balls[i].vx * cyc / 1000;
                myCanvasCtx.beginPath();
                myCanvasCtx.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2, true);
                myCanvasCtx.closePath();
                myCanvasCtx.fill();
            }
        }

        
        const moveAsync = eval(Wind.compile("async", function () {
           while (true) {
               collide2();
               $await(Wind.Async.sleep(cyc, null));
           }
        }));
        init();
        window.onload = function () {
            moveAsync().start();
        }
    </script>
</body>
</html>